<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 结论：Promsie用来封装异步任务，解决异步任务返回值的问题。
      // 场景：100个ajax请求。
      // 使用函数，将fetch封装起来，让参数变得灵活一些。
      function request(url, params = {}) {
        // let result = null
        // Promise参数是一个函数，固定语法。参数是: resolve和reject，也是固定的
        return new Promise((resolve, reject) => {
          try {
            fetch(url, params)
              .then((res) => res.json())
              .then(({ data }) => {
                // return data // 注意：虽然return关键字是在request里面写着呢，但是return是属于.then里面箭头函数的return，跟request没有关系。
                // result = data
                resolve(data) // resolve()负责向外部传递数据
                console.log("--- resolve() 了")
              })
              .catch((err) => {
                reject("请求失败了")
              })
          } catch (error) {
            reject("请求失败了") // Promise任务失败了，调用reject
          }
        })

        // return result // 这个return才是request函数的返回值。
      }

      // const res = request("https://apif.java.crmeb.net/api/front/index")
      // console.log(res)

      request("https://apif.java.crmeb.net/api/front/index").then((res) => {
        console.log("-- .then执行了", res)
      })

      // 总结：Promise对象都有一个.then方法，用于接收Promise返回的结果。当Promise内部调用resolve的时候，就会执行.then，从而得到请求的结果。

      // request("https://apif.java.crmeb.net/api/front/coupons?page=1&limit=6", {
      //   method: "get",
      //   headers: { "content-type": "xxx" },
      // })
      // fetch("", {
      //   method: "post",
      //   headers: {},
      //   body: {}
      // }).then(res => res.json()).then(data => {
      //   console.log(data);
      // })
      // fetch("", {
      //   method: "post",
      //   headers: {},
      //   body: {}
      // }).then(res => res.json()).then(data => {
      //   console.log(data);
      // })
      // fetch("", {
      //   method: "post",
      //   headers: {},
      //   body: {}
      // }).then(res => res.json()).then(data => {
      //   console.log(data);
      // })

      // 作业：利用axios和promise封装写一个天气查询案例.
      // 1. 首先根据ip定位，定位到当前城市，根据当前城市查询天气情况；
      // 2. 可以输入城市名称，查询天气情况；e45ba07980d4a0817d2edeba0de23add

      // IP自动定位接口GET请求：https://restapi.amap.com/v3/ip?key=e45ba07980d4a0817d2edeba0de23add
      // 天气查询接口GET请求：https://restapi.amap.com/v3/weather/weatherInfo?key=e45ba07980d4a0817d2edeba0de23add&city=城市名称&extensions=天气类型(all)
      // extensions 两个可选值 base:返回当天实况天气 all:返回预报天气
    </script>
  </body>
</html>
